/**
 * 资产选取页面
 */
import { useMemo, useState } from "react";

import { Button, Modal, Avatar, List, Form, Input, Select  } from "antd";
import {
  FreeLayoutProps,
  WorkflowNodeProps,
  WorkflowNodeRenderer,
  Field,
  useNodeRender,
  domUtils,
} from "@flowgram.ai/free-layout-editor";

//资产选取表单
const data = [
  {
    title: '西长街园林管理处楼下8号门面房',
  },
  {
    title: '柳州市鹿寨县鹿寨镇独羊村一处约3000平方米土地经营权',
  },
  {
    title: '呼和浩特市赛罕区呼伦南路科技宫1层1011号房产',
  },
  {
    title: '长沙市岳麓区润城万象商业中心T1#栋（悦玺）2609',
  },
];
export const AssetSelectionButton = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();
  const assetTypeValue = Form.useWatch('assetType', form) || 'FC';

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        新增资产
      </Button>
      <List
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item, index) => (
          <List.Item>
            <List.Item.Meta
              avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
              title={<a href="https://ant.design">{item.title}</a>}
              description="这是一个资产描述"
            />
          </List.Item>
        )}
      />
      <Modal
        title="新增资产"
        open={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null} // 如果不需要默认的 footer 按钮，可以设置为 null
      >
        {/* 悬浮窗口内容 */}
        <Form
          form={form} // 关键：绑定表单实例
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="left"
          labelWrap
          wrapperCol={{ flex: 1 }}
          colon={false}
          style={{ maxWidth: 600 }}
        >
          <Form.Item label="资产类型" name="assetType" rules={[{ required: true }]}>
            <Select
              defaultValue="FC"
              style={{}}
              // onChange={handleChange}
              options={[
                { value: 'FC', label: '房产' },
                { value: 'TD', label: '土地' },
              ]}
            />
          </Form.Item>
          <Form.Item label="资产名称" name="username" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item label="类型" name="password1" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item label="介绍" name="password" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item 
            label="土地面积"
            name="tdMj"
            rules={[{ required: true }]}
            style={{ display: assetTypeValue === 'TD' ? 'block' : 'none' }}
          >
            <Input />
          </Form.Item>
          <Form.Item 
            label="房产面积"
            name="fcMj"
            rules={[{ required: true }]}
            style={{ display: assetTypeValue === 'FC' ? 'block' : 'none' }}
          >
            <Input />
          </Form.Item>

          <Form.Item label=" ">
            <Button type="primary" htmlType="submit">
              保存
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
